<template>
	<view style="margin: 0rpx 8rpx;margin-bottom: 8rpx;">
		<fui-button @click="show()" background="#f1f1f1" color="black" height="64rpx"
			radius="16rpx" style="box-sizing: border-box;">
			<div style="margin-left: 16rpx;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{tag==null?tittle:tag}}</div>
			<fui-icon style="margin-left: 16rpx;margin-right: 16rpx;" size="42" name="arrowdown"></fui-icon>
		</fui-button>
	</view>
	
	<fui-picker :value="value" linkage title="请选择年级" :layer="1" :options="options" :show="showDropDown" @change="change"
		@cancel="onShowCancel"></fui-picker>
</template>

<script>
	export default {
		name:"MyDropdownMenu",
		props: {
			options:Array,
			tittle:Object,
			value:String,
		},
		data() { 
			return {
				tag:null,
				showDropDown: false,
			};
		},
		methods:{
			show(){
				console.log();
				this.showDropDown = true;
			},
			onShowCancel(){
				this.showDropDown = false;
			},
			change(e){
				this.tag = e.text;
				this.showDropDown = false;
				// 参数：$emit（'自定义事件名称'，传入的参数可以是多个，逗号分隔）
				this.$emit("onSelect",e)
			},
			reset(classList){
				setTimeout(()=>{
					console.log(this.options);
					if(this.options==null || this.options.length == 0){
						this.tag = "无班级";
						this.$emit("onSelect",null)
						return;
					}
					this.tag = this.options[0].text;
					this.showDropDown = false;
					// 参数：$emit（'自定义事件名称'，传入的参数可以是多个，逗号分隔）
					this.$emit("onSelect",this.options[0])
				},200)
			}
		}
	}
</script>

<style>

</style>